import React, { useEffect, useRef, useState } from 'react';
import bem from '@/utils/bem';
import classNames from 'classnames';
import NavBar from '@/components/navbar/navbar';
import Menu from '@/components/menu';
import './search.scss';
import ScrollGoods from '@/components/table/scrollGoods';

export interface SearchFilterProps {

}

const defaultProps = {
    menuColumn: [
        {
            text: '综合',
            value: '0',
            children: [
                { text: '综合', value: '0' },
                { text: '最新上架', value: '1' },
                { text: '价格最低', value: '2' },
                { text: '价格最高', value: '3' }
            ]
        },
        {
            text: '销量',
            value: '4'
        }
    ],
    params: {
        sortType: 'priceDesc',
        sourceType: 'h5_home_page_search',
        keyword: '',
        brand: '飞利浦,Apple',
        cateId: '',
    }
};

const SearchFilter: React.FC<SearchFilterProps> = (props) => {
    const {
        menuColumn,
        params,
        ...rest
    } = { ...defaultProps, ...props };
    const b = bem('search');

    const mergeSearch = (params?: Record<string, any>) => {
        const newParams = {
            ...params,
        }
        return newParams;
    }

    const [fromSearch, setFromSearch] = useState<Record<string, any>>(() => mergeSearch(params));

    const handlerMenu = (item: any) => {
        console.log(item);

        menuColumn.map(item => {
            
        })
    }

    return (
        <>
            <div className={b()}>
                <div className={classNames(b('head'))}>
                    <div className={b('nav')}>
                        <NavBar
                            backIcon={true}
                            right={
                                <>
                                    <button className={b('btn')}>搜索</button>
                                </>
                            }
                        />
                    </div>


                    <Menu
                        activeColor="#ff0000"
                        scrollFixed={false}
                        closeOnClickAway={true}
                        onChange={handlerMenu}
                    >
                        {
                            menuColumn?.map((item, index) => {
                                return (
                                    <Menu.Item key={index} options={item.children} defaultOption={item} />
                                )
                            })
                        }
                    </Menu>
                </div>

                <div className={b('body')}>
                    <ScrollGoods url='/api/product/search' params={
                        {
                            ...fromSearch,
                            pageNum: 1,
                            pageSize: 10
                        }
                    } />
                </div>
            </div>
        </>
    )
}

export default SearchFilter;